import React, { useState, useEffect } from 'react';
import './createAcitity.less';

import {
  Form,
  Input,
  Button,
  DatePicker,
  Space,
  Upload,
  message,
  Select,
  Modal,
} from 'antd';
const { RangePicker } = DatePicker;
const { TextArea } = Input;
const { Option } = Select;
import {
  LoadingOutlined,
  InfoCircleOutlined,
  DeleteOutlined,
  MinusCircleOutlined,
  PlusOutlined,
  CloseCircleOutlined,
  CaretUpOutlined,
  CaretDownOutlined,
} from '@ant-design/icons';

import { history } from 'umi';

const moment = require('moment');

import {
  formCreateActivity,
  formSaveDrafts,
} from '../../../../../api/createActivity';
export default function (props) {
  const [state, setState] = useState();
  const [selectTags, setSelectTags] = useState([
    //  选中创建活动的标签
    { id: 1, name: '报名', show: false },
    { id: 2, name: '投票', show: false },
    { id: 3, name: '门票', show: false },
    { id: 4, name: '签到', show: false },
    { id: 5, name: '抽奖', show: false },
  ]);
  const [applyForm] = Form.useForm(); //  报名的 form 表单  第二页
  const [applyName, setApplyName] = useState({
    //  第二页
    //  报名数据
    show: true, // 下面内容的显示和 隐藏的
    joinActivityInfoArr: [
      { id: 1, name: '姓名', infoShow: false },
      { id: 2, name: '性别', infoShow: false },
      { id: 3, name: '图片', infoShow: false },
      { id: 4, name: '手机号', infoShow: false },
      { id: 5, name: '生日', infoShow: false },
      { id: 6, name: 'QQ号', infoShow: false },
      { id: 7, name: '邮箱', infoShow: false },
      { id: 8, name: '邮箱', infoShow: false },
      { id: 9, name: '学院', infoShow: false },
      { id: 10, name: '年级', infoShow: false },
      { id: 11, name: '班级', infoShow: false },
      { id: 12, name: '学号', infoShow: false },
      { id: 13, name: '特长', infoShow: false },
      { id: 14, name: '备注', infoShow: false },
    ],
  });

  const [formData, setFormData] = useState({
    isSignUp: 0,
    isVote: 0,
    isRobTickets: 0,
    isSignIn: 0,
    isLuckyDraw: 0,
  }); //  所有表单的 数据

  const [pollFormShow, setPoolFormShow] = useState(false); //  投票 是否显示 下面的 内容
  const [pollForm] = Form.useForm(); //  投票 的 form 表单
  const [pollWayShow, setPollWayShow] = useState(false); // 投票方式 默认是 false
  function handleChange_1(value) {
    //  投票方式  显示隐藏每日上限
    // console.log(`selected ${value}`);
    setPollWayShow(value);
  }

  const handlePublishBtn = async () => {
    ///////// //  点击 保存的
    let sum = 0;
    let poolNameObj = {}; // 报名的
    let voteObj = {}; //  投票的
    let applyFromresult;
    if (selectTags[0].show) {
      //  如果 报名人数显示 高亮
      let formInfo = applyForm.getFieldValue();
      let joinClassmate = applyName.joinActivityInfoArr.filter(
        (f) => f.infoShow == true,
      );
      sum++;
      //   console.log('----', joinClassmate); //  参加者 填写的 信息

      //   console.log('666', formInfo);
      applyFromresult = applyForm.validateFields();
    }

    let pollFormResult;
    if (selectTags[1].show) {
      //  如果是 投票 高亮显示
      let formPoll = pollForm.getFieldsValue();
      sum++;
      pollFormResult = pollForm.validateFields();
      pollFormResult = await pollForm.validateFields();
    }

    selectTags[2].show && sum++; //  门票
    selectTags[3].show && sum++; //  签到
    selectTags[4].show && sum++; //  抽奖

    let sumLength = selectTags.filter((f) => f.show === true).length;

    if (Object.keys(poolNameObj).length > 0) {
      // 拿不到 写法 错误，拿不到 数据
      setFormData((a) => {
        let bb = JSON.parse(JSON.stringify(formData));
        bb.activityVOS = [];
        bb.activityVOS.push(poolNameObj);
        // console.log('push---', bb);
        return (a = bb);
      });
    }

    if (Object.keys(voteObj).length > 0) {
      setFormData((a) => {
        let bb = JSON.parse(JSON.stringify(formData));
        bb.activityVOS = [];
        bb.activityVOS.push(voteObj);
        return (a = bb);
      });
    }

    if (sumLength === sum) {
      //  发送请求的 地方
      // console.log("props::", props.basicData)
      const {
        activityName,
        activityContent,
        activitySite,
        activityOrganizers,
        startDate,
        endDate,
        pictureKey,
        pictureUrl,
        thumbnailPictureKey,
        thumbnailPictureUrl,
        provinceCode,
        cityCode,
        scheduleVOS,
        isSignUp,
        isVote,
        isRobTickets,
        isSignIn,
        isLuckyDraw,
      } = formData;

      PunlishFn({
        isSignUp,
        isRobTickets,
        isSignIn,
        isVote,
        isLuckyDraw,
        activityName,
        activityContent,
        activitySite,
        activityOrganizers,
        startDate,
        endDate,
        pictureKey,
        pictureUrl,
        thumbnailPictureKey,
        thumbnailPictureUrl,
        provinceCode,
        cityCode,
        scheduleVOS,
        activityVOS: [poolNameObj, voteObj],
      }).then((res) => {
        console.log('res', res);
        if (res.data.code === 601) {
          message.error(res.data.message);
        } else if (res.data.code === 200) {
          message.success(res.data.message);
        }
      });
    }
  };

  const handleSaveDrafts = async () => {
    //  草稿  修改保存草稿需要传activityBasicId

    let poolNameObj = {}; // 报名的
    let voteObj = {}; //  投票的
    let applyFromresult;
    if (selectTags[0].show) {
      //  如果 报名人数显示 高亮
      let formInfo = applyForm.getFieldValue();
      let joinClassmate = applyName.joinActivityInfoArr.filter(
        (f) => f.infoShow == true,
      );
      // console.log('----', joinClassmate); //  参加者 填写的 信息

      applyFromresult = await applyForm.validateFields();

      poolNameObj.activityType = 1;
      poolNameObj.startDate = applyFromresult.applyActivityTime
        ? moment(applyFromresult.applyActivityTime[0]).format(
            'YYYY-MM-DD HH:mm',
          )
        : null;
      poolNameObj.endDate = applyFromresult.applyActivityTime
        ? moment(applyFromresult.applyActivityTime[1]).format(
            'YYYY-MM-DD HH:mm',
          )
        : null;
      poolNameObj.numberLimit = applyFromresult.applyPeopleCount;
      poolNameObj.requiredEntryForms = joinClassmate.map((m) => ({
        key: m.name,
        value: m.id,
      }));
      poolNameObj.optionalEntryForms = applyFromresult.applyName
        ? applyFromresult.applyName.map((m, index) => ({
            key: index,
            value: m.itemName,
            // inputType: 1,
            // length: 30,
            // inputVerifyType: 'BaseInput7',
          }))
        : null;

      // console.log("第一  第一  第一", applyFromresult)
    }

    // console.log('草稿--表单一---', poolNameObj);
    // return

    let pollFormResult;
    if (selectTags[1].show) {
      //  如果是 投票 高亮显示
      let formPoll = pollForm.getFieldsValue();
      pollFormResult = await pollForm.validateFields();

      if (
        props.activityEditData &&
        Object.keys(props.activityEditData).length > 0
      ) {
        console.log('表单：：', pollFormResult);

        voteObj.activityType = 2;
        voteObj.startDate = pollFormResult
          ? moment(pollFormResult.pollActivityTime[0]).format(
              'YYYY-MM-DD HH:mm',
            )
          : null;
        voteObj.endDate = pollFormResult
          ? moment(pollFormResult.pollActivityTime[1]).format(
              'YYYY-MM-DD HH:mm',
            )
          : null;
        voteObj.voteWay = pollFormResult.pollActivityWay ? 2 : 1; // 投票方式
        voteObj.dayVoteLimit = pollFormResult.pollSingleday;
        voteObj.singlePlayerLimit = pollFormResult.pollRepeat;

        voteObj.voteObjectVOS = pollFormResult.pollObj
          ? pollFormResult.pollObj.map((m, index) => ({
              instructions: m.pollExplain, //  说明
              name: m.pollItemName, //  名称
              pictureKey:
                Object.keys(m.pollimg[0]).length === 3
                  ? m.pollimg[0].name
                  : m.pollimg[0]?.response?.data?.imgKey, //  图片的key
              pictureUrl:
                Object.keys(m.pollimg[0]).length === 3
                  ? m.pollimg[0].url
                  : m.pollimg[0]?.response?.data?.imgUrl, //  图片的  Url
            }))
          : null;

        console.log('投票 -- 编辑表单 二--', voteObj);
      } else {
        //  说明是 新建 活动 模块
        voteObj.activityType = 2;
        voteObj.startDate = pollFormResult
          ? moment(pollFormResult.pollActivityTime[0]).format(
              'YYYY-MM-DD HH:mm',
            )
          : null;
        voteObj.endDate = pollFormResult
          ? moment(pollFormResult.pollActivityTime[1]).format(
              'YYYY-MM-DD HH:mm',
            )
          : null;
        voteObj.voteWay = pollFormResult.pollActivityWay ? 2 : 1; // 投票方式
        voteObj.dayVoteLimit = pollFormResult.pollSingleday;
        voteObj.singlePlayerLimit = pollFormResult.pollRepeat;

        voteObj.voteObjectVOS = pollFormResult.pollObj
          ? pollFormResult.pollObj.map((m, index) => ({
              instructions: m.pollExplain,
              name: m.pollItemName,
              pictureKey: m.pollimg[0].response.data.imgKey,
              pictureUrl: m.pollimg[0].response.data.imgUrl,
            }))
          : null;
      }
    }

    if (Object.keys(poolNameObj).length > 0) {
      // 拿不到 写法 错误，拿不到 数据
      setFormData((a) => {
        let bb = JSON.parse(JSON.stringify(formData));
        bb.activityVOS = [];
        bb.activityVOS.push(poolNameObj);
        // console.log('push---', bb);
        return (a = bb);
      });
    }

    if (Object.keys(voteObj).length > 0) {
      setFormData((a) => {
        let bb = JSON.parse(JSON.stringify(formData));
        bb.activityVOS = [];
        bb.activityVOS.push(voteObj);
        return (a = bb);
      });
    }

    const {
      activityName,
      activityContent,
      activitySite,
      activityOrganizers,
      startDate,
      endDate,
      pictureKey,
      pictureUrl,
      thumbnailPictureKey,
      thumbnailPictureUrl,
      provinceCode,
      cityCode,
      scheduleVOS,
      activityVOS,
    } = formData;

    if (
      props.activityEditData &&
      Object.keys(props.activityEditData).length > 0
    ) {
      let id = history.location.query.activityBasicId;
      console.log('需要 发送 编辑后的请求', id); //  修改保存草稿需要传activityBasicId

      formSaveDrafts({
        isSignUp: selectTags[0].show ? 1 : 0,
        isRobTickets: selectTags[2].show ? 1 : 0,
        isSignIn: selectTags[3].show ? 1 : 0,
        isVote: selectTags[1].show ? 1 : 0,
        isLuckyDraw: selectTags[4].show ? 1 : 0,
        activityName,
        activityContent,
        activitySite,
        activityOrganizers,
        startDate,
        endDate,
        pictureKey,
        pictureUrl,
        thumbnailPictureKey,
        thumbnailPictureUrl,
        provinceCode,
        cityCode,
        scheduleVOS,
        activityVOS: [poolNameObj, voteObj],
        activityBasicId: id,
      })
        .then((res) => {
          console.log('保存草稿res:', res);
          if (res.data.code === 601) {
            message.error(res.data.message);
          } else if (res.data.code === 200) {
            message.success(res.data.message);
          }
        })
        .catch((err) => console.log('保存草稿err', err));

      return;
    }

    formSaveDrafts({
      isSignUp: selectTags[0].show ? 1 : 0,
      isRobTickets: selectTags[2].show ? 1 : 0,
      isSignIn: selectTags[3].show ? 1 : 0,
      isVote: selectTags[1].show ? 1 : 0,
      isLuckyDraw: selectTags[4].show ? 1 : 0,
      activityName,
      activityContent,
      activitySite,
      activityOrganizers,
      startDate,
      endDate,
      pictureKey,
      pictureUrl,
      thumbnailPictureKey,
      thumbnailPictureUrl,
      provinceCode,
      cityCode,
      scheduleVOS,
      activityVOS: [poolNameObj, voteObj],
    })
      .then((res) => {
        console.log('保存草稿res:', res);
        if (res.data.code === 601) {
          message.error(res.data.message);
        } else if (res.data.code === 200) {
          message.success(res.data.message);
        }
      })
      .catch((err) => console.log('保存草稿err', err));
  };

  const PunlishFn = async (...args) => {
    return await formCreateActivity(
      //     activityName,   //  活动名称
      //     activityContent,   //  活动内容
      //     activitySite,   //  活动地点
      //     activityOrganizers,   //  活动主办方
      //     startDate,   //  活动开始时间 （2021-1-11 14:00）
      //     endDate,   //  活动结束时间 （2021-7-15  14:00）

      //     pictureKey,   //  活动图片  Key
      //     pictureUrl,   //  活动图片  Url
      //     thumbnailPictureKey,   //  缩略图  Key
      //     thumbnailPictureUrl,   //  缩略图  Url
      //     provinceCode,   //  省编码
      //     cityCode,   //  市编码
      //     scheduleVOS,   //  日程对象集合                                 Obj

      //     isSignUp,   //  是否有报名活动 1-是0-否          Bit   [1]   [0]
      //     isRobTickets,   //  是否有抢票活动 1-是0-否      Bit
      //     isSignIn,   //  是否有签到活动 1-是0-否          Bit
      //     isVote,   //  是否有投票活动 1-是0-否             Bit
      //     isLuckyDraw,   //  是否有抽奖活动 1-是0-否         Bit

      //     activityVOS,   //  活动对象集合  报名、投票、抢票、签到、抽奖   Obj
      ...args,
    );
  };

  // 上传图片的
  const [previewVisible, setPreviewVisible] = useState(false);
  const [previewImage, setPreviewImage] = useState('');
  const [previewTitle, setPreviewTitle] = useState('');

  useEffect(() => {
    //  监听 基本信息传过来的数据
    let firstForm = {};

    if (
      props.activityEditData &&
      Object.keys(props.activityEditData).length > 0
    ) {
      //  表示 是 编辑的
      // console.log('总数据 ', props.activityEditData);
      if (Object.keys(props.basicData).length) {
        // console.log('拿到 第一一一一个表单 修改后的数据: ', props.basicData);

        firstForm.activityName = props.basicData.activityName;
        firstForm.activityContent = props.basicData.activityContent;
        firstForm.activitySite = props.basicData.activityPlace
          ? props.basicData.activityPlace
          : null;
        firstForm.activityOrganizers = props.basicData.activityOrganizer
          ? props.basicData.activityOrganizer
          : null;
        firstForm.startDate = moment(props.basicData.activityTime[0]).format(
          'YYYY-MM-DD HH:mm',
        );
        firstForm.endDate = moment(props.basicData.activityTime[1]).format(
          'YYYY-MM-DD HH:mm',
        );

        if (Object.keys(props.basicData.activityImg_1[0]).length === 3) {
          //  说明 图片 没有 被 修改
          firstForm.pictureKey = props.basicData.activityImg_1[0].name;
          firstForm.pictureUrl = props.basicData.activityImg_1[0].url;
        } else {
          //  说明 上传 图片的 代码 被 修改了

          firstForm.pictureKey =
            props.basicData.activityImg_1[
              props.basicData.activityImg_1.length - 1
            ].response.data.imgKey;

          firstForm.pictureUrl =
            props.basicData.activityImg_1[
              props.basicData.activityImg_1.length - 1
            ].response.data.imgUrl;
        }

        if (Object.keys(props.basicData.activityImg_2[0]).length === 3) {
          //  说明 图片 没有 被 修改

          firstForm.thumbnailPictureKey = props.basicData.activityImg_2[0].name;
          firstForm.thumbnailPictureUrl = props.basicData.activityImg_2[0].url;
        } else {
          //  说明 上传 图片的 代码 被 修改了

          firstForm.thumbnailPictureKey =
            props.basicData.activityImg_2[
              props.basicData.activityImg_2.length - 1
            ].response.data.imgKey;

          firstForm.thumbnailPictureUrl =
            props.basicData.activityImg_2[
              props.basicData.activityImg_2.length - 1
            ].response.data.imgUrl;
        }

        firstForm.provinceCode = props.basicData.activityArea[0];
        firstForm.cityCode = props.basicData.activityArea[1];
        firstForm.scheduleVOS = props.basicData.scheduleName
          ? props.basicData.scheduleName.map((m) => ({
              scheduleName: m.dayName,
              scheduleDate: moment(m.dayTime).format('YYYY-MM-DD HH:mm'),
            }))
          : null;

        setFormData(firstForm);
      }

      const {
        isSignUp,
        isVote,
        isRobTickets,
        isSignIn,
        isLuckyDraw,
        activityVOS,
      } = props.activityEditData;
      setSelectTags((a) => {
        //  数据回填  创建活动的高亮显示
        let b = JSON.parse(JSON.stringify(selectTags));
        isSignUp ? (b[0].show = true) : (b[0].show = false);
        isVote ? (b[1].show = true) : (b[1].show = false);
        isRobTickets ? (b[2].show = true) : (b[2].show = false);
        isSignIn ? (b[3].show = true) : (b[3].show = false);
        isLuckyDraw ? (b[4].show = true) : (b[4].show = false);
        return (a = b);
      });
      let a = activityVOS.filter((f) => f.activityType == 1)[0];
      let b = activityVOS.filter((f) => f.activityType == 2)[0];
      let arr = [];
      for (let i = 0; i < a.requiredEntryForms.length; i++) {
        arr.push(a?.requiredEntryForms[i]?.key);
      }
      setApplyName((ab) => {
        // 修改 报名信息的 展开  +  参加者填写信息 高亮
        let b = JSON.parse(JSON.stringify(applyName));
        isSignUp ? (b.show = false) : (b.show = true); //  展开 和 收起 的

        let bbb = b.joinActivityInfoArr.map((m, i) => ({
          ...m,
          infoShow: arr.indexOf(m.name) !== -1 ? true : false,
        }));
        b.joinActivityInfoArr = bbb;

        // console.log(" arr ", arr)

        return (ab = b);
      });
      setPoolFormShow(isVote); // 修改 投票信息的 展开

      // 回填  报名表单 applyForm  /////////////////////
      let newApplyForm = {
        applyActivityTime: [moment(a?.startDate), moment(a?.endDate)], // 活动时间
        applyPeopleCount: a?.numberLimit, //  报名人数
        applyName: a?.optionalEntryForms
          ? a?.optionalEntryForms.map((m) => ({ itemName: m.key }))
          : null, //  添加 补充项目名称
      };

      applyForm.setFieldsValue(newApplyForm);
      /////////////////////////////////////////////////////////

      // 投票 表单数据 回填    ///////////////////////
      let newPollForm = {
        pollActivityTime: b?.startDate
          ? [moment(b?.startDate), moment(b?.endDate)]
          : null, //  活动时间
        pollActivityWay: b?.voteWay == 2 ? true : false, // 投票方式
        pollSingleday: b?.dayVoteLimit, //  单日上限
        pollRepeat: b?.singlePlayerLimit, //  重复投票上限
        pollObj: b?.voteObjectVOS
          ? b?.voteObjectVOS?.map((m) => ({
              //  投票对象
              pollItemName: m.name, // 项目 名称
              pollExplain: m.instructions, // 项目 说明
              pollimg: [{ uid: '-1', name: m.pictureKey, url: m.pictureUrl }], // 显示 图片
            }))
          : null,
      };
      b?.voteWay == 2 ? setPollWayShow(true) : setPollWayShow(false); //  投票方式改变 引起的 显示 和 隐藏

      pollForm.setFieldsValue(newPollForm);
      /////////////////////////////////////////
    } else {
      //   创建 活动 数据时候的 表单
      // console.log("--------")
      if (Object.keys(props.basicData).length > 0) {
        firstForm.activityName = props.basicData.activityName;
        firstForm.activityContent = props.basicData.activityContent;
        firstForm.activitySite = props.basicData.activityPlace
          ? props.basicData.activityPlace
          : null;
        firstForm.activityOrganizers = props.basicData.activityOrganizer
          ? props.basicData.activityOrganizer
          : null;
        firstForm.startDate = moment(props.basicData.activityTime[0]).format(
          'YYYY-MM-DD HH:mm',
        );
        firstForm.endDate = moment(props.basicData.activityTime[1]).format(
          'YYYY-MM-DD HH:mm',
        );

        firstForm.pictureKey =
          props.basicData.activityImg_1[
            props.basicData.activityImg_1.length - 1
          ].response.data.imgKey;
        firstForm.pictureUrl =
          props.basicData.activityImg_1[
            props.basicData.activityImg_1.length - 1
          ].response.data.imgUrl;

        firstForm.thumbnailPictureKey =
          props.basicData.activityImg_2[
            props.basicData.activityImg_2.length - 1
          ].response.data.imgKey;
        firstForm.thumbnailPictureUrl =
          props.basicData.activityImg_2[
            props.basicData.activityImg_2.length - 1
          ].response.data.imgUrl;
        firstForm.provinceCode = props.basicData.activityArea[0];
        firstForm.cityCode = props.basicData.activityArea[1];
        firstForm.scheduleVOS = props.basicData.scheduleName
          ? props.basicData.scheduleName.map((m) => ({
              scheduleName: m.dayName,
              scheduleDate: moment(m.dayTime).format('YYYY-MM-DD HH:mm'),
            }))
          : null;

        // firstForm.isSignUp = selectTags[0].show ? 1 : 0;
        // firstForm.isVote = selectTags[1].show ? 1 : 0;
        // firstForm.isRobTickets = selectTags[2].show ? 1 : 0;
        // firstForm.isSignIn = selectTags[3].show ? 1 : 0;
        // firstForm.isLuckyDraw = selectTags[4].show ? 1 : 0;

        setFormData(firstForm);
      }
    }
  }, [props.basicData, props.activityEditData]);

  const normFile = (e) => {
    // 第一页 和 第二页 都需要  upload 上传图片的
    // console.log('Upload event:', e);
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };

  return (
    <div>
      {/* 多选框  查看是否是选中的 选择你想要创建的活动  */}
      <div className="select_create_activity">
        <div className="select_create_title">
          {' '}
          选择你想要创建的活动 <span> （可多选） </span>{' '}
        </div>
        <div className="select_tags">
          {selectTags.map((item, index) => {
            return (
              <div
                key={item.id}
                className={!item.show ? 'active_color' : null}
                onClick={() => {
                  let a = JSON.parse(JSON.stringify(selectTags));
                  a[index].show = !selectTags[index].show;
                  setSelectTags(a);
                }}
              >
                {' '}
                {item.name}{' '}
                <CloseCircleOutlined
                  style={{
                    position: 'absolute',
                    right: '-1px',
                    top: '-1px',
                    color: '#000',
                    background: '#fff',
                    borderRadius: '50%',
                  }}
                  className={!item.show ? 'active_icon' : null}
                />
              </div>
            );
          })}
        </div>
      </div>

      {/* 显示 是否是选中的 */}
      <div className="select_enter_name">
        {/* 报名 */}
        <div className={!selectTags[0].show == true ? 'select_item' : null}>
          <div className="select_apply_item">
            <div style={{ fontWeight: '600' }}>报名</div>
            {!applyName.show && (
              <div
                onClick={() => {
                  setApplyName((a) => {
                    let b = JSON.parse(JSON.stringify(applyName));
                    b.show = true;
                    return (a = b);
                  });
                }}
                style={{ cursor: 'pointer' }}
              >
                {' '}
                收起 <CaretUpOutlined />{' '}
              </div>
            )}
            {applyName.show && (
              <div
                style={{ cursor: 'pointer' }}
                onClick={() => {
                  setApplyName((a) => {
                    let b = JSON.parse(JSON.stringify(applyName));
                    b.show = false;
                    return (a = b);
                  });
                }}
              >
                {' '}
                展开 <CaretDownOutlined />{' '}
              </div>
            )}
          </div>
          {!applyName.show && (
            <div>
              <div style={{ display: 'flex', alignItems: 'center' }}>
                {' '}
                <div className="apply_name_rectangle"></div> 基本信息{' '}
              </div>

              <Form
                name="apply"
                form={applyForm}
                initialValues={{
                  applyActivityTime: '',
                  applyPeopleCount: '',
                }}
                // onFinish={applyNameonFinish}
                // onFinishFailed={applyNameonFinishFailed}
                autoComplete="off"
              >
                <div
                  style={{
                    border: '1px solid #efeff2',
                    padding: '35px 35px',
                    marginTop: '15px',
                    marginBottom: '15px',
                  }}
                >
                  <div className="apply_form_item">
                    <div className="apply_form">
                      <Form.Item
                        label="活动时间"
                        name="applyActivityTime"
                        rules={[{ required: true, message: '请输入活动时间' }]}
                        style={{
                          flexDirection: 'column',
                          // width: '400px',
                          marginBottom: '0px',
                          alignItems: 'flex-start',
                        }}
                      >
                        <RangePicker showTime />
                      </Form.Item>
                    </div>

                    <div>
                      <Form.Item
                        label="报名人数"
                        name="applyPeopleCount"
                        // rules={[{ required: true, message: 'Please input your password!' }]}
                        style={{
                          flexDirection: 'column',
                          // width: '400px',
                          marginBottom: '0px',
                          alignItems: 'flex-start',
                        }}
                      >
                        <Input
                          placeholder="不填即无限制"
                          style={{ width: '300px' }}
                        />
                      </Form.Item>
                    </div>
                  </div>
                </div>

                <div
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    marginBottom: '15px',
                  }}
                >
                  {' '}
                  <div className="apply_name_rectangle"></div>{' '}
                  选择您希望活动参加者填写的信息{' '}
                </div>
                <div
                  style={{
                    border: '1px solid #efeff2',
                    padding: '10px',
                    marginTop: '15px',
                    display: 'flex',
                    flexWrap: 'wrap',
                  }}
                >
                  {applyName.joinActivityInfoArr.map((item, index) => {
                    return (
                      <div
                        key={item.id}
                        className={
                          item.infoShow
                            ? 'apply_activity_info active_apply_activity_info'
                            : 'apply_activity_info'
                        }
                        onClick={() => {
                          let aa = JSON.parse(JSON.stringify(applyName));
                          aa.joinActivityInfoArr[index].infoShow =
                            !applyName.joinActivityInfoArr[index].infoShow;
                          setApplyName(aa);
                        }}
                      >
                        {item.name}
                      </div>
                    );
                  })}
                </div>

                <div
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    marginBottom: '15px',
                    marginTop: '15px',
                  }}
                >
                  {' '}
                  <div className="apply_name_rectangle"></div> 可添加补充项目{' '}
                </div>
                <div
                  style={{
                    border: '1px solid #efeff2',
                    padding: '30px 10px 10px',
                    marginTop: '15px',
                  }}
                >
                  {/* 项目名称 */}
                  <Form.List name="applyName">
                    {(fields, { add, remove }) => (
                      <>
                        {fields.map((field) => (
                          <Space key={field.key} align="baseline">
                            <Form.Item
                              {...field}
                              label="项目名称"
                              name={[field.name, 'itemName']}
                              rules={[
                                { required: true, message: '请输入项目名称' },
                              ]}
                            >
                              <Input placeholder="请输入项目名称, 如爱好" />
                            </Form.Item>

                            <DeleteOutlined
                              style={{
                                color: '#da2a13',
                                cursor: 'pointer',
                                marginRight: '20px',
                              }}
                              onClick={() => remove(field.name)}
                            />
                          </Space>
                        ))}
                        <Form.Item>
                          <Button
                            type="dashed"
                            onClick={() => add()}
                            block
                            icon={<PlusOutlined />}
                          >
                            添加
                          </Button>
                        </Form.Item>
                      </>
                    )}
                  </Form.List>
                </div>
              </Form>
            </div>
          )}
        </div>

        {/* 投票 */}
        <div className={!selectTags[1].show == true ? 'select_item' : null}>
          <div className="select_apply_item">
            <div style={{ fontWeight: '600' }}>投票</div>
            {pollFormShow && (
              <div
                onClick={() => {
                  setPoolFormShow(false);
                }}
                style={{ cursor: 'pointer' }}
              >
                {' '}
                收起 <CaretUpOutlined />{' '}
              </div>
            )}
            {!pollFormShow && (
              <div
                style={{ cursor: 'pointer' }}
                onClick={() => {
                  setPoolFormShow(true);
                }}
              >
                {' '}
                展开 <CaretDownOutlined />{' '}
              </div>
            )}
          </div>
          {pollFormShow && (
            <div>
              {/* 标题 示例 */}
              <div style={{ display: 'flex', alignItems: 'center' }}>
                {' '}
                <div className="apply_name_rectangle"></div> 基本信息{' '}
              </div>

              <Form
                // name="basic"
                // labelCol={{ span: 8 }}
                // wrapperCol={{ span: 16 }}
                form={pollForm}
                initialValues={{ pollActivityTime: '', pollActivityWay: '' }}
                // onFinish={onFinish}
                // onFinishFailed={onFinishFailed}
                autoComplete="off"
              >
                <div
                  style={{
                    border: '1px solid #efeff2',
                    padding: '10px 20px 30px',
                    marginTop: '15px',
                    marginBottom: '15px',
                    display: 'flex',
                    flexWrap: 'wrap',
                  }}
                >
                  <Form.Item
                    label="活动时间"
                    name="pollActivityTime"
                    rules={[{ required: true, message: '请输入活动时间!' }]}
                    style={{
                      flexDirection: 'column',
                      // width: '400px',
                      marginBottom: '0px',
                      alignItems: 'flex-start',
                      marginRight: '150px',
                    }}
                  >
                    <RangePicker showTime />
                  </Form.Item>

                  <Form.Item
                    label="投票方式"
                    name="pollActivityWay"
                    rules={[{ required: true, message: '请选择投票方式' }]}
                    style={{
                      flexDirection: 'column',
                      // width: '400px',
                      marginBottom: '0px',
                      alignItems: 'flex-start',
                      marginRight: '150px',
                    }}
                  >
                    <Select
                      placeholder="请选择投票方式"
                      style={{ width: 300 }}
                      onChange={handleChange_1}
                    >
                      <Option value={false}>只可投一次</Option>
                      <Option value={true}>每日均可投</Option>
                    </Select>
                  </Form.Item>

                  {/* 显示 隐藏的 */}
                  {pollWayShow && (
                    <Form.Item
                      label="单日可投上限"
                      name="pollSingleday"
                      rules={[{ required: true, message: '请输入单日可投' }]}
                      style={{
                        flexDirection: 'column',
                        // width: '400px',
                        marginBottom: '0px',
                        alignItems: 'flex-start',
                        marginRight: '150px',
                      }}
                    >
                      <Input
                        placeholder="请输入 1 ~ 9999999的整数"
                        style={{ width: '300px' }}
                      />
                    </Form.Item>
                  )}

                  {/* 显示 隐藏的 */}
                  {pollWayShow && (
                    <div style={{ display: 'flex', alignItems: 'flex-end' }}>
                      <Form.Item
                        label="重复投票上限"
                        name="pollRepeat"
                        rules={[{ required: true, message: '请输入重复上限' }]}
                        style={{
                          flexDirection: 'column',
                          // width: '400px',
                          marginBottom: '0px',
                          alignItems: 'flex-start',
                        }}
                      >
                        <Input
                          placeholder="请输入 1 ~ 9999999的整数"
                          style={{ width: '300px' }}
                        />
                      </Form.Item>
                      <span
                        style={{
                          color: '#c4c4c4',
                          fontSize: '12px',
                          marginLeft: '15px',
                          marginBottom: '7px',
                        }}
                      >
                        {' '}
                        说明: 每名用户可投给单个选手的票数限制{' '}
                      </span>
                    </div>
                  )}
                </div>

                <div style={{ display: 'flex', alignItems: 'center' }}>
                  {' '}
                  <div className="apply_name_rectangle"></div> 投票对象{' '}
                </div>

                <div
                  style={{
                    border: '1px solid #efeff2',
                    padding: '10px 20px 30px',
                    marginTop: '15px',
                    marginBottom: '15px',
                  }}
                >
                  {/* 投票对象 */}

                  <Form.List name="pollObj">
                    {(fields, { add, remove }) => (
                      <>
                        {fields.map((field) => (
                          <Space
                            key={field.key}
                            align="baseline"
                            style={{
                              display: 'flex',
                              flexDirection: 'column',
                              width: '100%',
                            }}
                          >
                            <div
                              style={{
                                display: 'flex',
                                justifyContent: 'space-between',
                                width: '100%',
                              }}
                            >
                              <Form.Item
                                {...field}
                                label="名称"
                                name={[field.name, 'pollItemName']}
                                rules={[
                                  {
                                    required: true,
                                    message: '请输入项目名称',
                                  },
                                ]}
                              >
                                <Input placeholder="请输入投票对象的名称" />
                              </Form.Item>

                              <Form.Item
                                {...field}
                                label="说明"
                                name={[field.name, 'pollExplain']}
                                rules={[
                                  {
                                    required: true,
                                    message: '请输入投票说明',
                                  },
                                ]}
                              >
                                <Input placeholder="请输入投票对象的说明" />
                              </Form.Item>
                            </div>

                            <div
                              style={{
                                display: 'flex',
                                alignItems: 'center',
                              }}
                            >
                              <Form.Item
                                {...field}
                                label="图片"
                                valuePropName="fileList"
                                getValueFromEvent={normFile}
                                name={[field.name, 'pollimg']}
                                rules={[
                                  { required: true, message: '请上传图片' },
                                ]}
                              >
                                {/* <Input placeholder='请输入投票对象的说明' /> */}

                                <Upload
                                  action="/campus/campusweb/upload/pictureUpload" // 上传的地址
                                  name="multipartFile"
                                  listType="picture-card"
                                  maxCount={1}
                                  // fileList={fileList}
                                  //   onPreview={handlePreviewPoll} // 点击文件链接或预览图标时的回调
                                  //   onChange={handleChangePoll} //上传文件改变时的状态
                                >
                                  {/* {fileList.length >= 8 ? null : ( */}
                                  <div>
                                    <PlusOutlined />
                                    <div style={{ marginTop: 8 }}>添加图片</div>
                                  </div>
                                  {/* )} */}
                                </Upload>
                                {/* <Modal
                                        visible={previewVisible}
                                        title={previewTitle}
                                        footer={null}
                                        onCancel={handleCancelPoll}
                                        >
                                        <img
                                            alt="example"
                                            style={{ width: '100%' }}
                                            src={previewImage}
                                        />
                                    </Modal> */}
                              </Form.Item>

                              <DeleteOutlined
                                style={{
                                  color: '#da2a13',
                                  cursor: 'pointer',
                                  marginRight: '20px',
                                }}
                                onClick={() => remove(field.name)}
                              />
                            </div>
                          </Space>
                        ))}
                        <Form.Item>
                          <Button
                            type="dashed"
                            onClick={() => add()}
                            block
                            icon={<PlusOutlined />}
                          >
                            添加
                          </Button>
                        </Form.Item>
                      </>
                    )}
                  </Form.List>
                </div>
              </Form>
            </div>
          )}
        </div>

        {/* 门票 */}
        <div className={!selectTags[2].show == true ? 'select_item' : null}>
          <div className="select_apply_item">
            <div style={{ fontWeight: '600' }}> 门票 </div>
            {pollFormShow && (
              <div style={{ cursor: 'pointer' }}>
                {' '}
                收起 <CaretUpOutlined />{' '}
              </div>
            )}
            {!pollFormShow && (
              <div style={{ cursor: 'pointer' }}>
                {' '}
                展开 <CaretDownOutlined />{' '}
              </div>
            )}
          </div>
        </div>

        {/* 签到 */}
        <div className={!selectTags[3].show == true ? 'select_item' : null}>
          <div className="select_apply_item">
            <div style={{ fontWeight: '600' }}> 签到 </div>
            {pollFormShow && (
              <div style={{ cursor: 'pointer' }}>
                {' '}
                收起 <CaretUpOutlined />{' '}
              </div>
            )}
            {!pollFormShow && (
              <div style={{ cursor: 'pointer' }}>
                {' '}
                展开 <CaretDownOutlined />{' '}
              </div>
            )}
          </div>
        </div>
        {/* 抽奖 */}
        <div className={!selectTags[4].show == true ? 'select_item' : null}>
          <div className="select_apply_item">
            <div style={{ fontWeight: '600' }}> 抽奖 </div>
            {pollFormShow && (
              <div style={{ cursor: 'pointer' }}>
                {' '}
                收起 <CaretUpOutlined />{' '}
              </div>
            )}
            {!pollFormShow && (
              <div style={{ cursor: 'pointer' }}>
                {' '}
                展开 <CaretDownOutlined />{' '}
              </div>
            )}
          </div>
        </div>

        {/* 底部 按钮 */}
        <div className="footer_btn_all">
          <Button
            style={{ color: '#fff', background: '#1a257a' }}
            onClick={() => handlePublishBtn()}
          >
            {' '}
            发布{' '}
          </Button>
          <Button onClick={() => props.btnBackStep()}> 上一步 </Button>
          <Button
            onClick={() => {
              // console.log('预览', props.activityEditData);
              console.log('预览', props.activityEditData.activityVOS[0]);
            }}
          >
            {' '}
            预览{' '}
          </Button>
          <Button onClick={handleSaveDrafts}> 保存草稿 </Button>
        </div>
      </div>
    </div>
  );
}

function getBase64_2(file) {
  //  第二页 上传图片
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}
